import React, { useState } from 'react'
// import Hello from './components/Hello'
import { CSSTransition } from 'react-transition-group'

export default function LayOut () {
  const [flag, setFlag] = useState(true)
  function changeFlag () {
    console.log(1111)
    setFlag(!flag)
  }
  return (
    <div>
      <button onClick={changeFlag}>...</button>
      <CSSTransition
        in={flag}
        classNames={{
          enter: 'animate__animated',
          enterActive: 'animate__slideInLeft',
          exit: 'animate__animated',
          exitActive: 'animate__slideInLeft'
        }}
        timeout={3000}
        unmountOnExit
      >
        <p>动画内容</p>
      </CSSTransition>
    </div>
  )
}
